<template>
  <div class="login_box">
    <div class="login_content">
      <div class="login_main">
        <el-form :model="data.user" label-width="120px" class="login_form">
          <div class="login_input_control">
            <el-tag size="large">管理员登录页</el-tag>
            <el-input
              v-model="data.user.username"
              :prefix-icon="UserFilled"
              placeholder="请输入用户名"
              size="large"
              type="username"
            />
            <el-input
              v-model="data.user.password"
              :prefix-icon="Lock"
              placeholder="请输入密码"
              size="large"
              type="password"
            />
            <el-button class="login_btn" type="primary" @click="login()"
              >登录</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { UserFilled, Lock } from '@element-plus/icons-vue'
import { useStore } from '@/store/user'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

const store = useStore()
let data = reactive({
  user: {
    username: '',
    password: '',
  },
})
//登录
const login = (e) => {
  if (data.user.username === '' || data.user.password === '') {
    ElMessage.error('请输入用户名或密码！')
  } else {
    req
      .login({
        username: data.user.username,
        password: data.user.password,
      })
      .then((e) => {
        if (e.code == 20000) {
          store.LoginInfo = e.data
          ElMessage({ message: '登录成功', type: 'success' })
          //获取菜单
          store.navMenu = router.options.routes
          router.push({ path: '/main' })
        } else if (e.code == 51000) {
          ElMessage.error('用户名或密码错误！')
        } else {
          ElMessage({ message: '系统错误，请联系管理员!', type: 'warning' })
        }
        // console.log(e)
      })
  }
}
</script>

<style lang="less">
.login_box {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/login_img.jpg') 50% / cover no-repeat;
  .login_content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    .login_main {
      background-color: #fff;
      width: 470px;
      height: 100%;
      box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
      border-radius: 5px 0px 0px 5px;
      display: flex;
      justify-content: center;
      align-items: center;

      .login_form {
        display: flex;
        justify-content: center;
        .login_input_control > * {
          margin-bottom: 20px;
        }
        .login_input_control {
          padding: 170px 60px 180px;
          .login_btn {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
